<template>
  <div class="app-container">
    <div class="content">
      <div class="lgm-search">
        <el-form
          ref="form"
          :model="searchParams"
          label-width="100px"
          class="search-form"
        >
          <el-form-item label="出入库数据">
            <el-select v-model="searchParams.department">
              <el-option label="出库" value="出库" />
              <el-option label="入库" value="入库" />
            </el-select>
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker
              v-model="searchParams.time1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="款号">
            <el-input
              v-model="searchParams.delivery_number"
              placeholder="请输入订单号、款式编号、款式、颜色"
            ></el-input>
          </el-form-item>
          <el-row>
            <el-button
              type="success"
              class="lgm-search-btn"
              icon="el-icon-search"
              @click="seach"
              >搜索</el-button
            >
            <el-button
              class="lgm-reset-btn"
              icon="el-icon-refresh"
              @click="reset"
              >重置</el-button
            >
            <!-- <el-button type="primary" plain>
                            导入入库数据
                        </el-button>
                        <el-button type="primary" plain>
                            导入出库数据
                        </el-button> -->
          </el-row>
        </el-form>
      </div>

      <div class="info">
        <div class="item">
          <p class="title">出库数量</p>
          <div class="box">{{ detail.outbound_quantity }}</div>
        </div>
        <div class="item">
          <p class="title">入库数量</p>
          <div class="box">{{ detail.outbound_storage }}</div>
        </div>
        <div class="item">
          <p class="title">库存数量</p>
          <div class="box">{{ detail.inventory_quantity }}</div>
        </div>
      </div>

      <div class="table-header-btn">
        <el-button
          type="success"
          plain
          size="small"
          class="lgm-add-btn"
          icon="el-icon-plus"
          @click="addList"
          >新增</el-button
        >
        <!-- <el-button
          type="danger"
          plain
          size="small"
          icon="el-icon-delete"
          @click="deleteList"
          >删除</el-button
        > -->
      </div>

      <div class="table">
        <el-table :data="dataList" border>
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="delivery_number"
            label="出库单号"
            align="center"
            min-width="170"
          ></el-table-column>
          <el-table-column
            prop="product_code"
            label="产品编码"
            align="center"
            min-width="170"
          ></el-table-column>
          <el-table-column
            prop="category_name"
            label="产品分类"
            align="center"
            min-width="170"
          ></el-table-column>
          <el-table-column
            prop="style_name"
            label="款式"
            align="center"
            min-width="170"
          ></el-table-column>
          <el-table-column
            prop="size_name"
            label="尺码"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="color_name"
            label="颜色"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="model_name"
            label="规格型号"
            align="center"
            min-width="170"
          ></el-table-column>
          <el-table-column
            prop="unit"
            label="单位"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="inventory_num"
            label="库存数量"
            align="center"
            min-width="170"
          ></el-table-column>
          <el-table-column
            prop="delivery_price"
            label="出库单价"
            align="center"
            min-width="170"
          ></el-table-column>
          <!-- <el-table-column
            prop="cksl"
            label="出库数量"
            align="center"
            min-width="170"
          ></el-table-column> -->

          <el-table-column
            prop="delivery_time"
            label="出库时间"
            align="center"
            min-width="120"
          ></el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="280"
          >
            <template slot-scope="scope">
              <div class="flex">
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  @click="handleEdit(scope.$index, scope.row)"
                >
                  <i class="el-icon-edit"></i> 修改
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  plain
                  @click="handleDelete(scope.$index, scope.row)"
                >
                  <i class="el-icon-delete"></i> 删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="lgm-page-wrap">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :page-sizes="[10, 100, 200, 300, 400]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 修改 -->
    <el-dialog
      title="出入库"
      :visible.sync="dialogVisible"
      center
      width="900px"
    >
      <el-form
        :model="detailForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="detailForm"
      >
        <el-form-item label="类型" style="width: 100%">
         
          <el-radio v-model="detailForm.type" label="出库">出库</el-radio>
          <el-radio v-model="detailForm.type" label="入库">入库</el-radio>
        </el-form-item>
        <el-form-item
          label="出库单号"
          prop="delivery_number"
          style="width: 50%"
        >
          <el-input v-model="detailForm.delivery_number"></el-input>
        </el-form-item>
        <el-form-item label="产品编码" prop="product_code" style="width: 50%">
          <el-input v-model="detailForm.product_code"></el-input>
        </el-form-item>

        <el-form-item
          label="产品分类"
          prop="style_category_id"
          style="width: 50%"
        >
          <el-select
            v-model="detailForm.style_category_id"
            placeholder="产品分类"
            style="width: 100%"
          >
            <el-option
              v-for="item in clothing_categoryAdminList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="款式" prop="style_id" style="width: 50%">
          <el-select
            v-model="detailForm.style_id"
            placeholder="款式"
            style="width: 100%"
          >
            <el-option
              v-for="item in styleAdminList"
              :key="item.id"
              :label="item.style_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="尺寸" prop="size_id" style="width: 50%">
          <el-select
            v-model="detailForm.size_id"
            placeholder="尺寸"
            style="width: 100%"
          >
            <el-option
              v-for="item in sizeList"
              :key="item.id"
              :label="item.size_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="颜色" prop="colorList" style="width: 50%">
          <el-select
            v-model="detailForm.color_id"
            placeholder="颜色"
            style="width: 100%"
          >
            <el-option
              v-for="item in colorList"
              :key="item.id"
              :label="item.color_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="规格型号" prop="model_name" style="width: 50%">
          <el-input v-model="detailForm.model_name"></el-input>
        </el-form-item>
        <el-form-item label="单位" prop="unit" style="width: 50%">
          <el-input v-model="detailForm.unit"></el-input>
        </el-form-item>
        <el-form-item label="库存数量" prop="inventory_num" style="width: 50%">
          <el-input v-model="detailForm.inventory_num"></el-input>
        </el-form-item>
        <el-form-item label="出库单价" prop="delivery_price" style="width: 50%">
          <el-input v-model="detailForm.delivery_price"></el-input>
        </el-form-item>

        <el-form-item label="出口时间" prop="delivery_time" style="width: 50%">
          <el-date-picker
            v-model="detailForm.delivery_time"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button class="lgm-reset-btn" @click="dialogVisible = false"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="dialogConfirm('ruleForm')"
          class="lgm-search-btn"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  staticdelivery,
  clothing_categoryAdmin,
  styleAdmin,
  colorAdmin,
  sizeAdmin,
  deliveryAdmin,
} from "@/api/admin";

export default {
  name: "StyleManage",
  data() {
    return {
      page: 1,
      page_size: 10,
      total: 0,
      detail: {},
      clothing_categoryAdminList: [],
      styleAdminList: [],
      sizeList: [],
      colorList: [],
      

      searchParams: {
        type: "",
        start_time: "",
        end_time: "",
        time1: "",
        delivery_number: "",
      },
      detailForm: {
        delivery_number: "",
        product_code: "",
        style_category_id: "",
        style_id: "",
        size_id: "",
        color_id: "",
        model_name: "",
        unit: "",
        inventory_num: "",
        delivery_price: "",
        delivery_time: "",
        type: "出库",
      },
      rules: {},
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      ],
      dataList: [],
      dialogVisible: false,
    };
  },
  mounted() {
    this.staticdeliveryFn();
    this.clothing_categoryAdminFn();
    this.styleAdminFn();
    this.colorAdminFn();
    this.sizeAdminFn();
    this.deliveryAdminFn();
  },
  methods: {
    handleSizeChange(value) {
      this.page_size = value;
      this.deliveryAdminFn();
    },
    handleCurrentChange(value) {
      this.page = value;
      this.deliveryAdminFn();
    },
    deliveryAdminFn() {
        let obj = this.searchParams;
      if (this.searchParams.time1) {
        obj["start_time"] = this.formatDate(this.searchParams.time1[0]);
        obj["end_time"] = this.formatDate(this.searchParams.time1[1]);
      }
      deliveryAdmin(
        {
          page: this.page,
          page_size: this.page_size,
          ...obj,
        },
        "GET"
      ).then((e) => {
        console.log(e.data.list);
        this.dataList = e.data.list;
        this.total = e.data.total;
      });
    },
    dialogConfirm() {
      console.log(this.detailForm);
      deliveryAdmin(
        this.detailForm,
        this.detailForm.id ? "PATCH" : "POST",
        this.detailForm.id
      ).then((e) => {
        this.dialogVisible = false;
        this.seach();
      });
    },

    seach() {
      this.page = 1;
      this.deliveryAdminFn();
      this.staticdeliveryFn();
    },
    reset() {
      for (let i in this.searchParams) {
        this.searchParams[i] = null;
      }
      this.seach();
    },

    addList() {
      this.detailForm = {
        delivery_number: "",
        product_code: "",
        style_category_id: "",
        style_id: "",
        size_id: "",
        color_id: "",
        model_name: "",
        unit: "",
        inventory_num: "",
        delivery_price: "",
        delivery_time: "",
        type: "出库",
      };
      this.dialogVisible = true;
    },
    handleEdit(idx, item) {
      deliveryAdmin({id:item.id}, "GET", item.id).then((e) => {
        this.detailForm =JSON.parse( JSON.stringify(item));

this.dialogVisible = true;
        });
    
    },
    handleDelete(index, item) {
      this.$confirm("是否确认删除选中的?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        confirmButtonClass: "submitDeleteBtn",
        type: "warning",
      }).then(() => {
        deliveryAdmin({}, "DELETE", item.id).then((e) => {
          this.seach();
        });

        this.$message({
          type: "success",
          message: "删除成功!",
        });
      });
    },
    colorAdminFn() {
      colorAdmin(
        {
          page: 1,
          page_size: 1000,
        },
        "GET"
      ).then((e) => {
        this.colorList = e.data.list;
      });
    },
    sizeAdminFn() {
      sizeAdmin(
        {
          page: 1,
          page_size: 1000,
        },
        "GET"
      ).then((e) => {
        this.sizeList = e.data.list;
      });
    },
    clothing_categoryAdminFn() {
      clothing_categoryAdmin(
        {
          page: 1,
          page_size: 1000,
        },
        "GET"
      ).then((e) => {
        this.clothing_categoryAdminList = e.data.list;
      });
    },
    styleAdminFn() {
      styleAdmin(
        {
          page: 1,
          page_size: 1000,
        },
        "GET"
      ).then((e) => {
        this.styleAdminList = e.data.list;
      });
    },

    
    clickItem() {
      console.log(456);
    },
    formatDate(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, "0"); // 月份从0开始
      const day = String(d.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    staticdeliveryFn() {
      let obj = this.searchParams;
      if (this.searchParams.time1) {
        obj["start_time"] = this.formatDate(this.searchParams.time1[0]);
        obj["end_time"] = this.formatDate(this.searchParams.time1[1]);
      }

      staticdelivery(obj, "GET").then((e) => {
        this.detail = e.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.app-container {
  .content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
  }

  .lgm-search {
    ::v-deep input {
      width: 210px;
    }
  }

  .info {
    display: flex;
    margin-bottom: 20px;
    .item {
      width: 220px;
      padding: 8px 15px;
      border: 1px solid #eee;
      border-radius: 6px;
      margin-right: 30px;
      .title {
        margin-bottom: 6px;
      }
      .box {
        width: 100%;
        height: 100px;
        border-radius: 6px;
        background-color: #fdf0e5;
        display: flex;
        align-items: center;
        justify-content: center;
        color: $fontColor;
        font-weight: bold;
        font-size: 18px;
      }
    }
  }
}
</style>
